<template>
  <div class="ticket">
    
    <div class="again_form_radio">
        <el-radio-group v-model="radio">
          <el-radio :label="1" size="large" border>单程</el-radio>
          <el-radio :label="2" size="large" border>往返</el-radio>
          <el-radio :label="3" size="large" border>多程</el-radio>
        </el-radio-group>
    </div>
    <!-- 重新搜索框 -->
    <div class="search_again">
      <div class="again_form">
        <TotalQuery @again_onSubmit="again_onSubmit" :radio="radio"></TotalQuery>
        
      </div>
    </div>
    <div></div>
    <div v-if="store.loading" class="loading">
      <img src="../../assets/pkq1.gif" alt="" />
      <p>搜索中....</p>
    </div>

    <router-view v-show="!store.loading"/>
  </div>
  <div style="width: 100%; height: 130px;"></div>
</template>

<script setup>
// 机票信息
import { reactive, ref, getCurrentInstance ,watch,inject,nextTick,onMounted} from "vue";
import { useRouter, useRoute } from "vue-router";
import url from "../../common/js/APIUtil";
import { ElMessage } from "element-plus";
import { Switch, Search, LocalTwo } from "@icon-park/vue-next"
import TotalQuery from "../query/TotalQuery.vue";
import {useStore} from '../../store/store';

// 调用函数 获得Store
const store = useStore();
const disabled = (time) => {
  return time.getTime() < Date.now() - 8.64e7;
};
//路由
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const rPath = ref('/index/ticketinformation/oneway')
const path = ref(url.API_GET_MULTI_TICKET)
const radio = ref(1);
//监视路由搜索类型更改路由与接口地址
watch(route,()=>{
  if (route.path == '/index/ticketinformation/oneway' || sessionStorage.getItem("company")) {
    rPath.value = '/index/ticketinformation/oneway'
    radio.value = 1
  }else if(route.path == '/index/ticketinformation/round'){
    rPath.value = '/index/ticketinformation/round'
    radio.value = 2
  }else{
    rPath.value = '/index/ticketinformation/multipass'
    radio.value = 3
  }
},{immediate:true})
watch(radio,()=>{
  if (radio.value===1) {
    rPath.value = '/index/ticketinformation/oneway'
  }else if(radio.value===2){
    rPath.value = '/index/ticketinformation/round'
  }else{
    rPath.value = '/index/ticketinformation/multipass'
  }
},{immediate:true})



//搜索数据
const searchAgain = reactive({
  upCity: route.query.upCity,
  downCity: route.query.downCity,
  upDate: route.query.upDate,
  downDate: route.query.downDate
});

//获取页面数据
const again_onSubmit = (searchAgain) => {
  store.company = []
  router.push({
    path: rPath.value,
    query: {
      upCity: searchAgain.upCity,
      downCity: searchAgain.downCity,
      upDate: searchAgain.upDate,
      downDate: searchAgain.downDate
    }, 
  });


};

</script>

<style scoped>
.loading {
  position: absolute;
  left: 41%;
  width: 200px;
  z-index: 998;
}
.again_form_radio{
  margin-left: 150px;
  margin-bottom: 15px;
}
.text {
  float: left;
  font-size: 15px;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}

.loading p {
  padding-left: 50px;
  font-size: 30px;
  color: rgba(0, 0, 0, 0.3);
}

.search_again {
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.again_form {
  margin: 10px auto;
  width: 1302px;
  transform: translate(2%, 0%);
}

.exchange {
  cursor: pointer;
  /* border: 1px solid rgba(0, 0, 0, 0.3); */
  border-radius: 20px;
}

.again_switch {
  width: 16px;
  height: 16px;
  margin: 0px 9px 0px -18px;
}

.again_button {
  height: 40px;
  width: 180px;
}

.card {
  position: absolute;
  width: 400px;
  z-index: 2000;
}

.downCard {
  position: absolute;
  width: 400px;
  top: 60px;
  z-index: 2000;
}
</style>
